<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-button type="primary" size="mini" @click="open(1)">Add</el-button>
      <hr>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="role_name" label="角色名称"/>
        <el-table-column prop="role_content" label="说明"/>
        <el-table-column label="操作">
          <template #default="props">
            <el-button type="primary" size="mini" @click="open(props.row)">Edit</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>

    <el-drawer
        :title="AuthType===1?'添加':'更新'"
        v-model="AuthDrawer"
        direction="rtl"
        :before-close="handleClose">

      <el-form :model="AuthFrom">
        <el-form-item label="权限名称">
          <el-input v-model="AuthFrom.role_name" placeholder="权限名称"/>
        </el-form-item>
        <el-form-item label="权限说明">
          <el-input v-model="AuthFrom.role_content" placeholder="权限说明"/>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="api权限">
              <el-tree
                  :data="api_data"
                  ref="api_data_ref"
                  show-checkbox
                  node-key="api_id"
                  :default-checked-keys="api_checked_keys"
                  :props="apiDefaultProps"
                  @check-change="check"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="web权限">
              <el-tree
                  :data="web_data"
                  ref="web_data_ref"
                  show-checkbox
                  :check-strictly="true"
                  default-expand-all
                  node-key="web_id"
                  :default-checked-keys="web_checked_keys"
                  :props="webDefaultProps"
                  @check-change="check"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="success" @click="save">{{ AuthType === 1 ? "Create" : "Update" }}</el-button>
        </el-form-item>
      </el-form>

    </el-drawer>

  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      AuthDrawer: false,
      AuthType: 1,
      AuthFrom: {},

      api_data: [],
      apiDefaultProps: {
        label: 'api_content',
      },

      web_data: [],
      webDefaultProps: {
        children: 'children',
        label: 'web_content',
      },

      api_checked_keys: [],
      web_checked_keys: [],
    }
  },
  created() {
    this.GetData()
    this.GetApiData()
    this.GetWebData()
  },
  methods: {
    check() {
      this.api_checked_keys = this.$refs.api_data_ref.getCheckedKeys()
      this.web_checked_keys = this.$refs.web_data_ref.getCheckedKeys()
    },
    async  GetData  () {
      const that = this
      const {data: res} = await axios.get('route/role')
      if (res.code !== 1000) return ElMessage.error(res.msg)
      res.data.forEach(function (v, k) {
        that.tableData[k] = {
          "rule_id": v["rule_id"],
          "role_name": v.role_name,
          "role_content": v.role_content,
          "role_api_list": v.role_api_list.split(',').map(function (data) {
            return 1 * data
          }),
          "role_web_list": v.role_web_list.split(',').map(function (data) {
            return 1 * data
          })
        }
      })
    },
    async GetApiData  () {
      const {data: res} = await axios.get('route/api' )
      if (res.code !== 1000) return ElMessage.error(res.msg)
      this.api_data = res.data
    },
    async GetWebData  () {
      const {data: res} = await axios.get('route/web')
      if (res.code !== 1000) return ElMessage.error(res.msg)
      this.web_data = res.data

    },
    open (data) {
      this.AuthDrawer = true
      if (data === 1) {
        this.AuthType = 1
      } else {
        this.AuthType = 2
        this.AuthFrom = data
        this.api_checked_keys = data.role_api_list
        this.web_checked_keys = data.role_web_list

        this.$refs.api_data_ref.setCheckedKeys(data.role_api_list)
        this.$refs.web_data_ref.setCheckedKeys(data.role_web_list)
      }
    },
    handleClose () {
      this.AuthDrawer = false
      this.AuthFrom = {}

      this.api_checked_keys = []
      this.web_checked_keys = []
      this.$refs.api_data_ref.setCheckedKeys([])
      this.$refs.web_data_ref.setCheckedKeys([])

    },
    async save  () {
      //组装数据
      const data = {
        "role_name": this.AuthFrom.role_name,
        "role_content": this.AuthFrom.role_content,
        "role_api_list": this.api_checked_keys.toString(),
        "role_web_list": this.web_checked_keys.toString()
      }

      if (this.AuthType === 1) {
        const {data: res} = await axios.put('route/role', data)
        if (res.code !== 1000) return ElMessage.error(res.msg)
      } else {
        data.rule_id = this.AuthFrom.rule_id
        const {data: res} = await axios.post('route/role', data)
        if (res.code !== 1000) return ElMessage.error(res.msg)
      }
      ElMessage.success("成功")
      this.handleClose()
      this.GetData()
    },

  }
}
</script>

<style scoped>

</style>
